<div class="ddp-layout-popuptype ddp-type-dataset">
  <em class="ddp-bg-popup"></em>
  <div class="ddp-ui-popup">
    <!-- title -->
    <div class="ddp-ui-popup-title">
      <span class="ddp-txt-title-name">
        {{title}}
      </span>
      <div class="ddp-ui-pop-buttons" *ngIf="layoutType == 'ADD'">
        <a href="javascript:" class="ddp-btn-pop" (click)="close()">{{'msg.comm.btn.cancl' | translate}}</a>
        <a href="javascript:" class="ddp-btn-pop ddp-bg-black" [class.ddp-disabled]="selectedDatasets === undefined || selectedDatasets === null || selectedDatasets.length === 0" (click)="done()">{{'msg.comm.btn.done2' | translate}}</a>
      </div>

      <div class="ddp-ui-pop-buttons" *ngIf="layoutType == 'SWAP'">
        <a href="javascript:" class="ddp-btn-pop" (click)="close()">{{'msg.comm.btn.cancl' | translate}}</a>
        <a href="javascript:" class="ddp-btn-pop ddp-bg-black" [class.ddp-disabled]="swappingDatasetId === undefined || swappingDatasetId === null || swappingDatasetId === ''" (click)="done()">{{'msg.comm.btn.done2' | translate}}</a>
      </div>
      <!-- det -->
    </div>
    <!-- //title -->
    <!-- contents in  -->
    <div class="ddp-ui-popup-contents">
      <div class="ddp-popup-dashboard">
        <!-- 옵션 -->
        <div class="ddp-type-top-option ddp-clear">
          <!-- 검색 -->
          <div class="ddp-form-search ddp-fleft">
            <em class="ddp-icon-search"></em>
            <input #inputSearch placeholder="{{'msg.dp.ui.ds.search.description' | translate}}"
                   [ngModel]="searchText"
                   (keypress)="searchEventPressKey($event)"
                   (keyup.esc)="resetSearchText(false)"
                   (clickOutside)="resetSearchText(false)">
            <em class="ddp-btn-search-close" *ngIf="searchText" (click)="resetSearchText(true);searchEvent();"></em>
          </div>
          <!-- //검색 -->
        </div>
        <!-- //옵션 -->
        <div class="ddp-wrap-variable">
          <!-- 그리드 영역 -->
          <!--ADD : heckbox-select-dataset-->
          <div class="ddp-wrap-grid" *ngIf="layoutType == 'ADD'" [class.ddp-selected]="selectedDatasetId != ''">
            <!-- 테이블 -->
            <div class="ddp-wrap-viewtable ddp-add">
              <div class="ddp-box-viewtable">
                <!-- gridhead -->
                <div class="ddp-ui-gridhead">
                  <table class="ddp-table-form ddp-table-type2">
                    <colgroup>
                      <col width="51px">
                      <col width="*">
                      <col width="150px">
                      <col width="180px">
                    </colgroup>
                    <thead>
                    <tr>
                      <th class="ddp-txt-center">
                        <label class="ddp-ui-checkbox" (click)="checkAll();">
                          <input type="checkbox" class="ddp-checkbox-form" [checked]="isAllChecked()" [disabled]="isCheckAllDisabled()">
                          <i class="ddp-icon-checkbox"></i>
                        </label>
                      </th>
                      <th class="ddp-cursor" (click)="changeOrder('dsName');">
                        {{'msg.comm.menu.manage.prep.set' | translate}}
                        <em class="ddp-icon-array-default2" *ngIf="selectedContentSort.key !== 'dsName' || selectedContentSort.sort === 'default'"></em>
                        <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'dsName' && selectedContentSort.sort === 'asc'"></em>
                        <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'dsName' && selectedContentSort.sort === 'desc'"></em>
                      </th>
                      <th>
                        {{'msg.comm.th.type' | translate}}
                      </th>
                      <th class="ddp-cursor" (click)="changeOrder('modifiedTime');">
                        {{'msg.comm.ui.list.last' | translate}}
                        <em class="ddp-icon-array-default2" *ngIf="selectedContentSort.key !== 'modifiedTime' || selectedContentSort.sort === 'default'"></em>
                        <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'modifiedTime' && selectedContentSort.sort === 'asc'"></em>
                        <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'modifiedTime' && selectedContentSort.sort === 'desc'"></em>
                      </th>
                    </tr>
                    </thead>

                  </table>
                </div>
                <!--// gridhead -->

                <!-- gridbody -->
                <div class="ddp-ui-gridbody">
                  <table class="ddp-table-form ddp-table-type2 ddp-table-select">
                    <colgroup>
                      <col width="51px">
                      <col width="*">
                      <col width="150px">
                      <col width="180px">
                    </colgroup>

                    <tbody>
                    <tr *ngFor="let item of datasets"
                        (click)="selectDataset(item);"
                        [ngClass]="{'ddp-selected': selectedDatasetId == item.dsId}">
                      <td class="ddp-txt-center">
                        <label class="ddp-ui-checkbox" (click)="check(item);">
                          <input type="checkbox" class="ddp-checkbox-form" [disabled]="item.origin" [checked]="item.selected && !item.origin" >
                          <i class="ddp-icon-checkbox"></i>
                        </label>
                      </td>
                      <td>
                        <div class="ddp-txt-long" title="{{item.dsName}} {{item.dsDesc? ' - ' + item.dsDesc : ''}}">
                          {{item.dsName}}
                          <span class="ddp-txt-colortype" *ngIf="item.dsDesc">- {{item.dsDesc}}</span>
                        </div>
                      </td>
                      <td *ngIf="item.dsType.toString() === 'WRANGLED'">
                        <span>{{'msg.dp.ui.wrangled.ds' | translate}}</span>
                      </td>

                      <td *ngIf="item.dsType !== null && item.dsType.toString() === 'IMPORTED'">
                        <span class="ddp-data-source">
                          {{prepCommonUtil.getDatasetType(item)}}
                        </span>
                      </td>

                      <td>
                        {{item.modifiedTime | mdate:'YYYY-MM-DD HH:mm'}}
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
                <!--// gridbody -->
              </div>
              <div class="ddp-box-add-link3" [ngClass]="{'ddp-disabled' : !(page.page < pageResult.totalPages)}" (click)="getMoreList()">
                <span class="ddp-link-type">{{'msg.comm.ui.more' | translate}} <em class="ddp-icon-view"></em></span>
              </div>
            </div>
            <!-- //테이블 -->
          </div>
          <!-- //그리드 영역 -->


          <!--SWAP : radio-select-dataset-->
          <div class="ddp-wrap-grid" *ngIf="layoutType == 'SWAP'" [ngClass]="{'ddp-selected': selectedDatasetId !== ''}">
            <!-- 테이블 -->
            <div class="ddp-wrap-viewtable ddp-add">
              <div class="ddp-box-viewtable">
                <!-- gridhead -->
                <div class="ddp-ui-gridhead">
                  <table class="ddp-table-form ddp-table-type2">
                    <colgroup>
                      <col width="51px">
                      <col width="*">
                      <col width="150px">
                      <col width="180px">
                    </colgroup>
                    <thead>
                    <tr>
                      <th class="ddp-txt-center">
                      </th>
                      <th class="ddp-cursor" (click)="changeOrder('dsName');">
                        {{'msg.comm.menu.manage.prep.set' | translate}}
                        <em class="ddp-icon-array-default2" *ngIf="selectedContentSort.key !== 'dsName' || selectedContentSort.sort === 'default'"></em>
                        <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'dsName' && selectedContentSort.sort === 'asc'"></em>
                        <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'dsName' && selectedContentSort.sort === 'desc'"></em>
                      </th>
                      <th>
                        {{'msg.comm.th.type' | translate}}
                      </th>
                      <th (click)="changeOrder('modifiedTime');">
                        {{'msg.comm.ui.list.last' | translate}}
                        <em class="ddp-icon-array-default2" *ngIf="selectedContentSort.key !== 'modifiedTime' || selectedContentSort.sort === 'default'"></em>
                        <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'modifiedTime' && selectedContentSort.sort === 'asc'"></em>
                        <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'modifiedTime' && selectedContentSort.sort === 'desc'"></em>
                      </th>
                    </tr>
                    </thead>

                  </table>
                </div>
                <!--// gridhead -->

                <!-- gridbody -->
                <div class="ddp-ui-gridbody">
                  <table class="ddp-table-form ddp-table-type2 ddp-table-select">
                    <colgroup>
                      <col width="51px">
                      <col width="*">
                      <col width="150px">
                      <col width="180px">
                    </colgroup>

                    <tbody>
                    <tr *ngFor="let item of datasets"
                        (click)="selectDataset(item);"
                        [ngClass]="{'ddp-selected': selectedDatasetId == item.dsId}">
                      <td class="ddp-txt-center"  (click)="radioCheck($event, item);">
                        <div class="ddp-ui-radio">
                          <input type="radio" class="ddp-checkbox-form" [checked]="swappingDatasetId === item.dsId" name="datasetRadio">
                          <i class="ddp-icon-radio"></i>
                        </div>
                      </td>
                      <td>
                        <div class="ddp-txt-long"  title="{{item.dsName}} {{item.dsDesc? ' - ' + item.dsDesc : ''}}">
                          {{item.dsName}}
                          <span class="ddp-txt-colortype" *ngIf="item.dsDesc">- {{item.dsDesc}}</span>
                        </div>
                      </td>

                      <td *ngIf="item.dsType !== null && item.dsType.toString() === 'WRANGLED'">
                        <span>{{'msg.dp.ui.wrangled.ds' | translate}}</span>
                      </td>

                      <td *ngIf="item.dsType !== null && item.dsType.toString() === 'IMPORTED'">
                        <span class="ddp-data-source">
                          {{prepCommonUtil.getDatasetType(item)}}
                        </span>
                      </td>

                      <td>
                        {{item.modifiedTime | mdate:'YYYY-MM-DD HH:mm'}}
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
                <!--// gridbody -->
              </div>
              <div class="ddp-box-add-link3" [ngClass]="{'ddp-disabled' : !(page.page < pageResult.totalPages)}" (click)="getMoreList()">
                <span class="ddp-link-type">{{'msg.comm.ui.more' | translate}} <em class="ddp-icon-view"></em></span>
              </div>
            </div>
            <!-- //테이블 -->

          </div>
          <!--SWAP : radio-select-dataset-->



        </div>
        <!-- 설명 -->
        <app-dataset-summary *ngIf="selectedDatasetId != null && selectedDatasetId !=''" (close)="onCloseSummary()" [datasetId]="selectedDatasetId"></app-dataset-summary>
        <!-- //설명 -->
        <!-- bottom option -->
        <div class="ddp-ui-bottomoption ddp-clear">
          <span class="ddp-data-type ddp-fleft" *ngIf="layoutType == 'ADD'">
            {{'msg.dp.ui.sel.count' | translate: { value : selectedDatasets.length } }}
          </span>

          <a href="javascript:"
             class="ddp-type-link3 ddp-fright"
             (click)="createDataset()">
            <em class="ddp-icon-linkplus"></em> {{'msg.dp.btn.create-ds' | translate }}
          </a>
        </div>
        <!-- //bottom option -->
      </div>


    </div>
    <!-- //contents in  -->
  </div>

</div>

<app-create-dataset [step]="step" [isFromDatasetList]="false"></app-create-dataset>
